<template>
	<div v-if="info">
		<div class="Dgoods_info">
			<div class="g_name wp96 m-center">
				{{info.g_name}}
			</div>
			<div class="line-bottom">
				<div class="wp96 g_price m-center">
					<span class="money_icon">￥</span>
					<span class="g_p">{{info.g_price}}</span>
					<span class="g_mp">￥{{info.g_mprice}}</span>
					&nbsp;&nbsp;
					<span class="g_p" v-if="info.g_discount==1?false:true">{{info.g_discount*100/10}}折</span>
					<span class="fr">已销售100</span>
				</div>
			</div>
			<div class="goods_info2">
				<div class="wp96 m-center" v-if="info.g_purpose">适合用途：<span v-for="value,index in JSON.parse(info.g_purpose)" class="gun"><span> | </span>{{value}}</span></div>
				<div class="wp96 m-center" v-if="info.g_target">适合对象：<span v-for="val,index in JSON.parse(info.g_target)" class="gun"><span > | </span>{{val}}</span></div>
			</div>
		</div>
		<div class="line-bottom">
			<div class="fl">
				数量:
			</div>
			<van-stepper v-model="value" />
		</div>
		<div class="line-bottom clearfix">
			<div class="fl">
				配送:
			</div>
			<div class="peisong fl">
				<div class="s1">
					 全国 （可配送至全国2000多个城市）
				</div>
				<div class="s2">
					提供24小时在线订购服务，1-3小时可送达；
				</div>
			</div>
		</div>
		<div class="Dgoods_ext mt12">
			<div class="wp96 m-center clearfix">
				<div style="width: 100%;overflow: hidden;">
				<div class="tit fl f12">
					材料：
				</div>
				<div class="dec fl f10">
					{{info.g_material}}
				</div>
				</div>
				<div style="width: 100%;overflow: hidden;">
				<div class="tit fl f12">
					花语：
				</div>
				<div class="dec fl f10">
					{{info.g_flolau}}
				</div>
				</div>
				<div style="width: 100%;overflow: hidden;">
				<div class="tit fl f12">
					包装：
				</div>
				<div class="dec fl f10">
					{{info.g_packing}}
				</div>
				</div>
				<div style="width: 100%;overflow: hidden;">
				<div class="tit fl f12">
					附送：
				</div>
				<div class="dec fl f10">
					免费附送精美贺卡，代写您的祝福。(您下单时可填写留言栏)
				</div>
				</div>
				<div style="width: 100%;overflow: hidden;">
				<div class="tit fl f12">
					配送：
				</div>
				<div class="dec fl f10">
					全国 （可配送至全国1000多个城市，市区免配送费）
				</div>
				</div>
				<div style="width: 100%;overflow: hidden;">
				<div class="tit fl f12">
					说明：
				</div>
				<div class="dec fl f10">
					由于鲜花包扎各地的花艺师不同，可能在花束的形式和搭配上与图片不完全一致，但我们保证鲜花的主花材品种、新鲜程度、数量、颜色与说明一致，谢谢。
				</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import Vue from 'vue';
	import {
		Stepper
	} from 'vant';

	Vue.use(Stepper);
	export default {
		data() {
			return {
				value: 1,
				g_id:this.info.id
			}
		},
		props:{
			info:[]
		},
		mounted() {
			this.$bus.$emit('show',this.value)
		},
		watch:{
			value(){
				this.$bus.$emit('show',this.value)
			}
		},
		beforeDestroy() {
			this.$bus.$emit('shows',this.info)
			// console.log(this.info)
		}
	}
</script>

<style scoped="scoped">
	.Dgoods_info {
		background-color: #fff;
	}

	.line-bottom {
		border-bottom: 1px solid #ddd;
		font-size: 12px;
		background: #fff;
	}

	.Dgoods_info .g_name {
		font-size: 1.125rem;
		color: #000;
		line-height: 2rem;
	}

	.Dgoods_info .g_price {
		line-height: 1.5rem;

	}

	.Dgoods_info .g_price .money_icon {
		font-size: 0.75rem;
		color: #e52f2f;
	}

	.Dgoods_info .g_price .g_p {
		font-size: 1rem;
		color: #e52f2f;
	}

	.Dgoods_info .g_price .g_mp {
		font-size: 0.75rem;
		color: #777;
		margin-left: 5px;
		text-decoration: line-through;
	}

	.Dgoods_info .g_price .fr {
		font-size: 0.75rem;
		color: #666;
	}

	.goods_info2 {
		padding: 0.75rem 0;
	}

	.goods_info2 div {
		font-size: 0.75rem;
		color: #666;
		line-height: 1.5rem;
	}

	.line-bottom .van-stepper {
		display: inline-block;
		padding: 0 0 10px 0;
	}

	.line-bottom .fl {
		line-height: 32px;
		margin-left: 6px;
	}

	.Dgoods_ext {
		padding: 5px 0;
		background: #fff;
	}

	.Dgoods_ext .tit {
		font-size: 0.75rem;
		color: #a2a4a6;
		font-weight: 400;
		padding: 2px 0px;
	}

	.Dgoods_ext .dec {
		color: #333;
		width: 83%;
		line-height: 20px;
	}
	.gun:first-child span{
		display: none;
	}
</style>
